<template>
	<view>
		<!-- 上面弹出层 -->
		<view class="top-popup">
			<view @click="toShu" class="top-btn"><image src="/static/137/800.png" mode=""></image></view>
			<view class="top-img">
				<image src="/static/137/xiazai.png" mode=""></image>
				<image src="/static/137/shoucang.png" mode=""></image>
				<image src="/static/137/fenxiang.png" mode="" @click="fenxiang"></image>
			</view>
		</view>
		<!-- 下面弹出层 -->
		<view class="bottom-popup">
			<view class="bottom-popup-shang">
				<view @click="topShu">上一章</view>
				<image src="/static/137/jiantou.png" mode=""></image>
				<view @click="bottomShu">下一章</view>
			</view>
			<view class="bottom-popup-xia">
				<view @click="mulu">
					<view class="xia-img" >
						<image src="/static/137/mulu.png" mode=""></image>
					</view>
					<view>目录</view>
				</view>
				<view @click="baiTian">
					<view class="xia-img">
						<image v-show="isText" src="/static/137/yewan.png" mode=""></image>
						<image v-show="!isText" src="/static/137/baitian.png" mode=""></image>
					</view>
					<view v-show="isText">夜间</view>
					<view v-show="!isText">白天</view>
				</view>
				<view @click="shezhi">
					<view class="xia-img">
						<image src="/static/137/shezhi.png" mode=""></image>
					</view>
					<view>设置</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"yuedu-topbtmpopup",
		props:{
			list:{}
		},
		data() {
			return {
				isText:true,  //控制白天夜间
			};
		},
		methods:{
			toShu(){  //添加到书架
				//console.log(111)
				//提示框
				let _this = this
				let newData = {src:this.list.imgSrc,title:this.list.title,show:false};
				uni.showModal({
				    content: '亲！是否将本书加入书架',
					cancelText:'暂不加入',
					confirmText:'加入书架',
				    success: function (res) {
				        if (res.confirm) {
				            //console.log('用户点击确定');
							//_this.newList = newData;
							//确认后将数据提交到本地缓存中,然后跳转页面
							// uni.setStorage({
							//     key: 'storage_key',
							//     data:newData,
							//     success: function () {
							//         console.log('success');
							// 		uni.showToast({
							// 		    title: '添加成功！',
							// 		    duration: 2000
							// 		});
							// 		uni.switchTab({
							// 			url:'../shujia/shujia'
							// 		})
							//     }
							// });
							try {
							    uni.setStorageSync('storage_key', newData);
								uni.switchTab({
									url:'../shujia/shujia'
								})
							} catch (e) {
							    // error
							}
				        } else if (res.cancel) {
				            //console.log('用户点击取消');
							uni.navigateBack()
				        }
				    }
				})
			},
			topShu(){  //点击了上一章
				uni.showToast({
				    title: '点击了上一章',
				    duration: 2000,
					icon:"none"
				});
			},
			bottomShu(){  //点击了下一章
				uni.showToast({
				    title: '点击了下一章',
				    duration: 2000,
					icon:"none"
				});
			},
			baiTian(){  //白天夜间的切换
				this.isText =! this.isText
				if(this.isText){
					//console.log("白天")
					this.$emit('isBeijing',"#fff","#000000")
				}else{
					//console.log("夜间")
					this.$emit('isBeijing',"#000000","#fff")
				}
			},
			mulu(){  //目录
				this.$emit('mulu')
			},
			shezhi(){  //设置
				this.$emit('shezhi')
			},
			fenxiang(){  //分享
				this.$emit('fenxiang')
			}
		}
	}
</script>

<style scoped lang="scss">
.top-popup{
	display: flex;
	justify-content: space-between;
	padding: 50rpx 37rpx 26rpx;
	height:128rpx;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	background-color: #fff;
	view{
		font-size: 45rpx;
	}
	.top-btn{
		image{
			width: 40rpx;
			height: 30rpx;
		}
		
	}
	.top-img{
		image{
			width: 45rpx;
			height: 33rpx;
			margin: 0 15rpx;
		}
	}
}
.bottom-popup{
	height:242rpx;
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: #fff;
	view{
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #090909;
		text-align: center;
	}
	.bottom-popup-shang{
		display: flex;
		justify-content: space-around;
		height: 120rpx;
		align-items: center;
		image{
			width: 417rpx;
			height: 44rpx;
		}
	}
	.bottom-popup-xia{
		display: flex;
		justify-content: space-around;
		.xia-img{
			image{
				width: 32rpx;
				height: 34rpx;
			}
		}
	}
}
</style>
